import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import './Mine.css'

export default function Mine() {
  const navigate = useNavigate()
  const [user, setUser] = useState({
    img: '../head.jpg',
    username: '暴龙战士',
    phone: '138****8888',
    concern: '3',
    collect: '3',
    score: '255',
    coupon: '3'
  })
  const [doctor, setDoctor] = useState({
    img: '../doctor.png',
    name: '张三被',
    position: '副主任医师',
    hospital: '芜湖儿童医院',
    department: '儿科',
    time: '10:10-12:00',
    tag: ['可开处方', '三甲']
  })
  return (
    <div>
      <div className="mine-top">
        <div className="mine-title">
          <h2>我的</h2>
          <span onClick={() => { navigate('/setting') }}>设置</span>
          <span>消息</span>
        </div>
        <div className="mine-content">
          <div className="mine-user">
            <img src={user.img} alt="" />
            <h2>{user.username}</h2>
            <p>{user.phone}</p>
          </div>
          <div className="mine-userData">
            <div className="mine-userData-item" onClick={() => { navigate('/concern') }}>
              <p>{user.concern}</p>
              <p>关注</p>
            </div>
            <div className="mine-userData-item" onClick={() => { navigate('/collect') }}>
              <p>{user.collect}</p>
              <p>收藏</p>
            </div>
            <div className="mine-userData-item" onClick={() => { navigate('/score') }}>
              <p>{user.score}</p>
              <p>积分</p>
            </div>
            <div className="mine-userData-item" onClick={() => { navigate('/coupon') }}>
              <p>{user.coupon}</p>
              <p>优惠券</p>
            </div>
          </div>
          <div className="mine-doctor">
            <div style={{ float: 'left' }}>
              <img src={doctor.img} alt="" />
            </div>
            <div className="mine-doctor-info">
              <h3>{doctor.name} <span>{doctor.position}</span> </h3>
              <p>{doctor.hospital} {doctor.department}</p>
              <p>问诊时间：{doctor.time}</p>
            </div>
            <div className="mine-doctor-tag">
              {
                doctor.tag.map((item, index) => {
                  return <span key={index}>{item}</span>
                })
              }
            </div>
            <div className='mine-doctor-btn'>
              <span>咨询医生</span>
            </div>
          </div>
        </div>
      </div>
      <div className="mine-bottom">
        <div className="health-serve">
          <h2>健康服务</h2>
          <div className="health-serve-item">
            <div onClick={() => { navigate('/serve1') }}>
              <img src='../doctor.png' alt="" />
              <p>医生问诊</p>
            </div>
            <div onClick={() => { navigate('/serve2') }}>
              <img src='../serve2.png' alt="" />
              <p>开药问诊</p>
            </div>
            <div onClick={() => { navigate('/serve3') }}>
              <img src='../serve3.png' alt="" />
              <p>我的处方</p>
            </div>
            <div onClick={() => { navigate('/serve4') }}>
              <img src='../serve4.png' alt="" />
              <p>药品订单</p>
            </div>
          </div>
        </div>
        <div className="tool">
          <h2>常用工具</h2>
          <div className="tool-item">
            <div onClick={() => { navigate('/file') }}>
              <img src='../tool1.png' alt="" />
              <p>家庭档案</p>
            </div>
            <div onClick={() => { navigate('/record') }}>
              <img src='../tool2.png' alt="" />
              <p>挂号记录</p>
            </div>
            <div>
              <img src='../tool3.png' alt="" />
              <p>我的医生</p>
            </div>
            <div>
              <img src='../tool4.png' alt="" />
              <p>我的评价</p>
            </div>
            <div>
              <img src='../tool5.png' alt="" />
              <p>推荐有礼</p>
            </div>
            <div>
              <img src='../tool6.png' alt="" />
              <p>常见问题</p>
            </div>
            <div>
              <img src='../tool7.png' alt="" />
              <p>意见反馈</p>
            </div>
            <div>
              <img src='../tool8.png' alt="" />
              <p>联系客服</p>
            </div>
            <div>
              <img src='../tool9.png' alt="" />
              <p>我的地址</p>
            </div>
            <div onClick={() => { navigate('/setting') }}>
              <img src='../tool10.png' alt="" />
              <p>设置</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
